<template>
  <div class="_main absolute">
    <div class="main">
      <div class="header">
        <img
          src="http://diandian.zgkpz.com/images/m_main/jifen.png"
          @click="jfrank"
        />
        <img
          src="http://diandian.zgkpz.com/images/m_main/wodejinbi.png"
          @click="myglod"
        />
        <img src="http://diandian.zgkpz.com/images/m_main/xuexijilu.png" @click="mylog"/>
      </div>
      <div>
        <div class="content">
          <img
            src="http://diandian.zgkpz.com/images/m_main/tingyinshitu.png"
            class="tingyin"
          />
          <div class="part1">
            <img
              src="http://diandian.zgkpz.com/images/m_main/xiaoxue.png"
              class="title"
            />
            <div>
              <img
                src="http://diandian.zgkpz.com/images/m_main/senlintanxian.png"
              />
              <img
                src="http://diandian.zgkpz.com/images/m_main/mofachengbao.png"
              />
              <img
                src="http://diandian.zgkpz.com/images/m_main/dongwuleyuan.png"
              />
              <img
                src="http://diandian.zgkpz.com/images/m_main/shenqishuwu.png"
              />
            </div>
          </div>
          <div class="part1">
            <img
              src="http://diandian.zgkpz.com/images/m_main/chuzhong.png"
              class="title"
            />
            <div>
              <img
                src="http://diandian.zgkpz.com/images/m_main/senlintanxian.png"
              />
              <img
                src="http://diandian.zgkpz.com/images/m_main/mofachengbao.png"
              />
              <img
                src="http://diandian.zgkpz.com/images/m_main/dongwuleyuan.png"
              />
              <img
                src="http://diandian.zgkpz.com/images/m_main/shenqishuwu.png"
              />
            </div>
          </div>
          <div class="part1">
            <img
              src="http://diandian.zgkpz.com/images/m_main/gaozhong.png"
              class="title"
            />
            <div>
              <img
                src="http://diandian.zgkpz.com/images/m_main/senlintanxian.png"
              />
              <img
                src="http://diandian.zgkpz.com/images/m_main/mofachengbao.png"
              />
              <img
                src="http://diandian.zgkpz.com/images/m_main/dongwuleyuan.png"
              />
              <img
                src="http://diandian.zgkpz.com/images/m_main/shenqishuwu.png"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Index",
  data: function() {
    return {
      screenWidth: document.body.clientWidth
    };
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  mounted: function() {},
  methods: {
    handleResize() {
      if (document.body.clientWidth > 770) {
        this.$router.replace({ path: "/web/main" });
      }
    },
    jfrank() {
      this.$router.replace({ path: "/rank" });
    },
    myglod() {
      this.$router.replace({ path: "/gold" });
    },
    mylog() {
      this.$router.replace({ path: "/log" });
    }
  }
};
</script>
<style scoped>
.content {
  width: 100%;
  text-align: center;
}
.header {
  display: inline-flex;
  justify-content: space-around;
  width: 100%;
}
.header img {
  width: 2rem;
  height: 2.5rem;
}
.tingyin {
  width: 2.5rem;
}
.part1 {
  width: 6rem;
  height: 5rem;
  border-radius: 20px;
  position: relative;
  left: 11%;
}
.part1 img {
  width: 2.5rem;
  padding: 0 0.1rem;
}
.part1 div {
  width: 6rem;
}
.content .part1:nth-child(2) {
  background: url("http://diandian.zgkpz.com/images/m_main/huangseback.png")
    no-repeat;
  background-size: 100%100%;
}
.content .part1:nth-child(4) {
  background: url("http://diandian.zgkpz.com/images/m_main/ziseback.png")
    no-repeat;
  background-size: 100%100%;
}
.content .part1:nth-child(3) {
  background: url("http://diandian.zgkpz.com/images/m_main/lanseback.png")
    no-repeat;
  background-size: 100%100%;
}
.title {
  margin: 0.2rem 0;
}
</style>
